
<p style="margin-bottom: 0px">&nbsp;</p>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="8">
        <nz-card>
          <nz-input-group [nzSuffix]="suffixIcon">
            <input type="text" nz-input placeholder="输入关键字进行过滤" [(ngModel)]="searchValue">
          </nz-input-group>
          <ng-template #suffixIcon>
            <i class="anticon anticon-search"></i>
          </ng-template>
          <div style="margin-top: 8px; max-height: 800px; overflow: auto">
            <div *ngIf="nodes.length === 0" style="margin: 0 auto; width: 100%; text-align: center">无数据</div>
            <nz-tree
                [nzSearchValue]="searchValue"
                (nzOnSearchNode)="mouseAction('search',$event)"
                [(ngModel)]="nodes"
                [nzShowLine]="true"
                [nzDraggable]="false"
                [nzDefaultExpandAll]="true"
                (nzExpandChange)="mouseAction('expand',$event)"
                (nzClick)="mouseAction('click',$event)"
                (nzOnDragStart)="mouseAction('dragstart',$event)"
                (nzOnDragEnter)="mouseAction('enter',$event)"
                (nzOnDragLeave)="mouseAction('leave', $event)"
                (nzOnDrop)="mouseAction('drop', $event)"
                (nzOnDragEnd)="mouseAction('end', $event)"
                (nzContextMenu)="contextMenu($event, contextTemplate)">
                <ng-template #contextTemplate>
                    <ul nz-menu nzInDropDown>                        
                        <li nz-menu-item (click)="edit()">修改菜单</li>
                        <li nz-menu-item (click)="del()">删除菜单</li>
                    </ul>
                </ng-template>
            </nz-tree>
          </div>
        </nz-card>
    </div>
    <div nz-col [nzMd]="16">
        <nz-card>
            <form nz-form [formGroup]="menuForm" (ngSubmit)="doEdit()" >
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="code">路径编码</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <input nz-input formControlName="code" id="code">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="title">标题</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <input nz-input formControlName="title" id="titke">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="parentId">父级节点</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <input nz-input readonly formControlName="parentId" id="parentId">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="icon">图标</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <input nz-input formControlName="icon" id="icon">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="href">资源URL</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <input nz-input formControlName="href" id="href">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="href">类型</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <nz-select [nzPlaceHolder]="'请选择'" formControlName="type" nzId="type">
                        <nz-option *ngFor="let type of types" [nzLabel]="type.labelDefault" [nzValue]="type.value"></nz-option>
                    </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="orderNum">排序</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                      <nz-input-number formControlName="orderNum" [nzMin]="0"  [nzStep]="1"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="description">描述</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                        <input nz-input formControlName="description" id="description">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="attr2">i18n</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24">
                        <input nz-input formControlName="attr2" id="attr2">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row style="margin-bottom:8px;" *ngIf="editStatus">
                    <nz-form-control [nzSpan]="14" [nzOffset]="6">
                      <button *ngIf="formStatus=='update'" nz-button [nzLoading]='loading' nzType="primary" type="submit">更新</button>
                      <button *ngIf="formStatus=='create'" nz-button [nzLoading]='loading' nzType="primary" type="submit">保存</button>
                      <button nz-button (click)='cancel()'>取消</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-card>

        <nz-card nzTitle="按钮或资源" [nzExtra]="addTemplate">
            <simple-table #st
                [columns]="columns"
                [data]="url"
                [ps]="ps"
                [extraParams]="q"
                [resReName]="{ total: 'data.total', list: 'data.rows' }"
                [reqReName]="{ pi:'pageNumber', ps: 'pageSize' }"
                toTopInChange
                [showTotal]="true"
                [showPagination]="true"
                [scroll]="{x: '800px'}"
                >
            </simple-table>
        </nz-card>
        <ng-template #addTemplate>
            <button *ngIf="addElementBtn" type="button" (click)="addElement()" nzSize="small" nz-button nzType="default" nzShape="circle"><i class="anticon anticon-plus"></i></button>
        </ng-template>
    </div>

</div>


